<template>
  <div class="wp-box">
    <!-- 协议解读 -->
    <div class="check-1">
      <p class="check-tit">输出协议解读</p>
      <div v-for="(item, index) in newData" :key="index">
        <!-- <p class="check-p">{{ item.Name }}</p> -->
        <el-checkbox-group v-model="checked" @change="agreementOne">
          <el-checkbox class="portraitBox" :label="items" v-for="(items, indexs) in item.contentList" :key="indexs">{{
            items.Describe }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <p class="check-tit Ttwo">物体识别数量</p>
      <el-input-number class="list-inp" v-model="NumberObjects" :step-strictly="true" :min="0" />
    </div>
  </div>
</template>
  
<script>
import { defineComponent, toRaw } from "vue";
export default defineComponent({
  name: "",
  components: {},
  data() {
    return {
      ProtocolConfig: {},
      checked: [],
      SubList: {},
      NumberObjects: 0,
      newData: [
        {
          // Name: "雷达配置",
          Name: "传感器状态",
          contentList: [
            {
              Id: 1,
              // System: "雷达配置",
              System: "传感器状态",
              CanId: 0x201,
              // Name: "雷达配置",
              Name: "传感器状态",
              Attribute: "RadarState_MaxDistanceCfg",
              // Describe: "雷达配置",
              Describe: "传感器状态",
              Data: "40 1D 40 00 00 34 00 00",
            }
          ],
        },
        {
          Name: "目标状态",
          contentList: [
            {
              Id: 5,
              System: "目标状态",
              CanId: 0x60a,
              Name: "目标状态",
              Attribute: "Object_NofObjects",
              Describe: "目标状态",
              Data: "07 6F 53 10 00 00 00 00",
            }
          ],
        },
        {
          Name: "目标扩展信息",
          contentList: [
            {
              Id: 7,
              System: "目标扩展信息",
              CanId: 0x60d,
              Name: "目标扩展信息",
              Attribute: "Object_ArelLong",
              Describe: "目标扩展信息",
              Data: "01 7D 0F A0 70 80 19 05",
            },
          ],
        },

        {
          Name: "目标一般信息",
          contentList: [
            {
              Id: 11,
              System: "目标一般信息",
              CanId: 0x60b,
              Name: "目标一般信息",
              Attribute: "Object_ID",
              Describe: "目标一般信息",
              Data: "05 4F 9B F5 80 20 01 71",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.Echo();
  },
  methods: {
    // 回显方法
    Echo() {
      this.SubList = JSON.parse(sessionStorage.getItem("AgreementList")) || {};
      if (this.SubList.ProtocolIds) {
        this.NumberObjects = this.SubList.Count
        this.SubList.ProtocolIds.forEach((items) => {
          this.newData.forEach((i) => {
            i.contentList.forEach((val) => {
              if (val.CanId == items) {
                this.checked.push(val);
              }
            });
          });
        });
      }
    },
    agreementOne(data) {
      console.log('123!@#',data);
      let newId = [];
      data.forEach((item) => {
        newId.push(item.CanId);
      });
      let newArrId = new Set(newId);
      let ArrData = [];
      newArrId.forEach((j) => {
        data.forEach((k) => {
          if (k.CanId == j) {
            ArrData.push({ Id: k.CanId, Properties: [] });
          }
        });
      });
      ArrData.forEach((l, index) => {
        data.forEach((v) => {
          if (v.CanId == l.Id) {
            let newDatas = [];
            v.Data.split(" ").forEach((o) => {
              newDatas.push(Number.parseInt(o, [16]));
            });
            l.Data = newDatas;
            l.Properties.push(v.Attribute);
          }
        });
      });
      // console.log(ArrData);
      let newDataList = ArrData.filter(function (element, index, self) {
        return self.findIndex((el) => el.Id == element.Id) === index;
      });
      console.log(newDataList);
      let ProtocolIds = []
      newDataList.forEach(item => {
        ProtocolIds.push(item.Id)
      });
      this.SubList.ProtocolIds = ProtocolIds
    },
    Sub() {
      if (this.NumberObjects == 0) {
        ElMessage({
          message: "数量至少为1！",
          type: "error",
        });
      } else {
        this.SubList.Count = this.NumberObjects
        this.$emit("ok", this.SubList);
      }
    },
  },
  mounted() {
    // console.log('1111',checked);
    // console.log('2222',NumberObjects);
  }
});
</script>
  
<style lang="less" scoped>
/deep/.el-icon {
  display: none;
}

/deep/.el-tree-node__label {
  font-size: 18px;
}

/deep/.el-tree-node__content {
  padding: 4px 0;
}

.tree-1 {
  margin-left: 20px;
  margin-top: 30px;
  padding-bottom: 20px;
}

/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #1b1b1d;
}

.check-1 {
  margin-left: 20px;
  margin-top: 30px;
}

.check-p {
  color: #1b1b1d;
  padding-left: 14px;
  font-size: 18px;
}

.check-tit {
  color: #1b1b1d;
  margin-bottom: 8px;
  font-size: 18px;
}

.portraitBox {
  height: 32px;
  padding-left: 26px;
  padding-right: 80px;
}

.list-inp {
  width: 250px;
  height: 38px;
  outline: none;
  padding-left: 10px;
}

.Ttwo {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>